<template>
	<view>
		<cu-custom bgColor="#ffffff" :isBack="false" textColor="#000000">
			<block slot="backText">返回</block>
			<block slot="content">学习</block>
		</cu-custom>

		<view style="background-color:#f6f6f6;padding-bottom: 20rpx;padding-top: 20rpx;">
			<view class="" >
				<view class="box" style="margin-bottom: 20rpx;">
					<view class="msg-lt-wrap">
						<image class="search_home"
							src=""
							style="width: 28rpx;height: 48rpx;"></image>
						<text class="msg-lt-title">班级课程</text>
					</view>
					<view v-if="userId == null && studentId == null">
						<view class="xiangziwrap">
							<image class="xiangzi" src="../../static/images/xiangzi.png" mode="aspectFill"></image>
							<text class="xiangzi_txt">未登录</text>
						</view>
					</view>
					<view class="course-wrap" v-else-if="baobanKechengList.length > 0">
						<view class="live-list" v-for="(item, index) in baobanKechengList" :key="index"
							@click="viewContentInfo(item.kechengId)" style="height: 300rpx;">
							<view class="live-list-img-wrap" style="margin-top: 50rpx;">
								<image class="live-list-img" :src="item.kechengImg" mode="aspectFill"></image>
								<!-- 	<text class="course-title-icon">系列课</text> -->
							</view>
							<view class="live-list-info">
								<view class="live-c-title">{{item.kechengName}}</view>
								<view class="live-teacher-price">
									<image class="live-teacher-avatar" :src="item.teacherImg" mode="aspectFill"></image>
									<text class="teacher-name">{{item.kechengTeacher}}</text>
									<view class="price-wrap">
										<text class="free">免费</text>
									</view>
								</view>
								<view class="" style="color: #64D3AD;">{{item.className}}</view>
								<view class="" style="">{{item.showDetp}}</view>
								<view class="uni-padding-wrap uni-common-mt">
									<view class="progress-box">
										<progress :percent="item.kankelv" show-info="true" active stroke-width="4"
											backgroundColor="#666666">已学</progress>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else>
						<view class="xiangziwrap">
							<image class="xiangzi"
								style="    position: relative;left: 0rpx;top: 16rpx;width: 500rpx;height: 300rpx; object-fit: contain;"
								src=""
								mode="aspectFill"></image>
							<text class="xiangzi_txt">暂无班级课程</text>
						</view>
					</view>
				</view>

				<view class="box">
					<view class="msg-lt-wrap">
						<image class="search_home"
							src=""
							style="width: 28rpx;height: 48rpx;"></image>
						<text class="msg-lt-title">学习课程</text>
					</view>
					<view v-if="userId == null && studentId == null">
						<view class="xiangziwrap">
							<image class="xiangzi" src="../../static/images/xiangzi.png" mode="aspectFill"></image>
							<text class="xiangzi_txt">未登录</text>
						</view>
					</view>
					<view class="course-wrap" v-else-if="liulanKechengList.length > 0">
						<view class="live-list" v-for="(item, index) in liulanKechengList" :key="index"
							@click="viewContentInfo(item.kechengId)" style="height: 250rpx;">
							<view class="live-list-img-wrap" style="margin-top: 40rpx;">
								<image class="live-list-img" :src="item.kechengImg" mode="aspectFill"></image>
								<!-- <text class="course-title-icon">系列课</text> -->
							</view>
							<view class="live-list-info">
								<view class="live-c-title">{{item.kechengName}}</view>
								<view class="live-teacher-price">
									<image class="live-teacher-avatar" :src="item.teacherImg" mode="aspectFill"></image>
									<text class="teacher-name">{{item.kechengTeacher}}</text>
									<view class="price-wrap">
										<text class="free">免费</text>
									</view>
								</view>
								<view class="" style="">{{item.showDetp}}</view>
								<view class="uni-padding-wrap uni-common-mt">
									<view class="progress-box">
										<progress :percent="item.kankelv" show-info="true" active stroke-width="4"
											backgroundColor="#666666">已学</progress>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else>
						<view class="xiangziwrap">
							<image class="xiangzi" style="    position: relative;
				left: 0rpx;top: 16rpx;width: 500rpx;height: 300rpx;object-fit: contain;"
								src=""
								mode="aspectFill"></image>
							<text class="xiangzi_txt">暂无学习课程</text>
						</view>
					</view>
				</view>

				<view class="box">
					<view class="msg-lt-wrap">
						<image class="search_home"
							src=""
							style="width: 28rpx;height: 48rpx;"></image>
						<text class="msg-lt-title">浏览课程</text>
					</view>
					<view v-if="userId == null && studentId == null">
						<view class="xiangziwrap">
							<image class="xiangzi" src="../../static/images/xiangzi.png" mode="aspectFill"></image>
							<text class="xiangzi_txt">未登录</text>
						</view>
					</view>
					<view class="course-wrap" v-else-if="noStudentKechengList.length > 0">
						<view class="live-list" v-for="(item, index) in noStudentKechengList" :key="index"
							@click="viewContentInfo(item.kechengId)" style="height: 250rpx;">
							<view class="live-list-img-wrap" style="margin-top: 40rpx;">
								<image class="live-list-img" :src="item.kechengImg" mode="aspectFill"></image>
								<!-- 					<text class="course-title-icon">系列课</text> -->
							</view>
							<view class="live-list-info">
								<view class="live-c-title">{{item.kechengName}}</view>
								<view class="live-teacher-price">
									<image class="live-teacher-avatar" :src="item.teacherImg" mode="aspectFill"></image>
									<text class="teacher-name">{{item.kechengTeacher}}</text>
									<view class="price-wrap">
										<text class="free">免费</text>
									</view>
								</view>
								<view class="" style="">{{item.showDetp}}</view>
								<view class="uni-padding-wrap uni-common-mt">
									<view class="progress-box" :style=" item.kankelv ? 'color:#3694EF' : ''"
										style=" position: relative;top: -11rpx;">
										<!-- :percent="item.kankelv" -->
										<progress :percent="item.kankelv" show-info="true" color="#3694EF" active
											stroke-width="8" border-radius="4" backgroundColor="#ccc">
											<text>已学</text>
										</progress>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else>
						<view class="xiangziwrap">
							<image class="xiangzi"
								style="    position: relative;left: 0rpx;top: 16rpx;width: 500rpx;height: 300rpx;object-fit: contain;"
								src=""
								mode="aspectFill"></image>
							<text class="xiangzi_txt">暂无浏览课程</text>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				theme: app.globalData.theme.backgroundColor, //全局颜色变量

				userId: '', //登录用户的主键
				baobanKechengList: [], // 报班课程
				liulanKechengList: [], // 学员未报班课程
				noStudentKechengList: [], //游客
			}
		},
		// 加载页面数据
		onShow: function() {
			// this.setUserId();
			this.yanZhengGetData();
		},
		onLoad(option) {

		},
		methods: {
			//页面加载数据
			yanZhengGetData() {
				if (
					!((app.globalData.userinfo.studentId != null && app.globalData.userinfo.studentId != "" && app
							.globalData.userinfo.studentId != undefined) ||
						(app.globalData.userinfo.userId != null && app.globalData.userinfo.userId != "" && app.globalData
							.userinfo.userId != undefined))
				) {
					this.toLogin();
				} else {

					if ((app.globalData.userinfo.studentId != null) && (app.globalData.userinfo.studentId != "") && (app
							.globalData.userinfo.studentId != undefined)) {
						this.getData();
					} else if ((app.globalData.userinfo.userId != null) && (app.globalData.userinfo.userId != "") && (app
							.globalData.userinfo.userId != undefined)) {
						// 班级课程
						uni.request({
							url: app.globalData.serve_study_url + 'getNoStudentKechengList/' + app.globalData
								.userinfo.user_phoneNum,
							data: {},
							success: res => {
								this.noStudentKechengList = res.data.data;
							}
						});
					}
				}
			},


			// //setUserId
			// setUserId(){
			// 	if((app.globalData.userinfo.studentId != null) && (app.globalData.userinfo.studentId != "") && (app.globalData.userinfo.studentId != undefined)){
			// 		this.getData();
			// 		this.userId = app.globalData.userinfo.studentId; 
			// 	}else if((app.globalData.userinfo.userId != null) && (app.globalData.userinfo.userId != "") && (app.globalData.userinfo.userId != undefined)){
			// 		// 班级课程
			// 		uni.request({
			// 			url: app.globalData.serve_study_url + 'getNoStudentKechengList/'+ app.globalData.userinfo.user_phoneNum,
			// 			data: {
			// 			},
			// 			success: res => {
			// 				this.noStudentKechengList = res.data.data;	
			// 			}
			// 		});
			// 	}
			// },

			//跳转登录
			toLogin() {
				uni.showModal({
					title: "登录提示",
					content: "请登录后，继续观看课程",
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '../login/login'
							});
						} else if (res.cancel) {}
					}
				});
			},

			//获取数据
			getData() {

				// 学习课程
				uni.request({
					url: app.globalData.serve_study_url + 'getLiulanKechengList/' + app.globalData.userinfo
						.user_phoneNum,
					data: {},
					success: res => {
						this.liulanKechengList = res.data.data;

						// 班级课程
						uni.request({
							url: app.globalData.serve_study_url + 'getBaobanKechengList/' + app
								.globalData.userinfo.user_phoneNum,
							data: {},
							success: res => {
								this.baobanKechengList = res.data.data;
							}
						});
					}
				});
			},

			//跳转课程详情
			viewContentInfo(kechengId) {
				uni.navigateTo({
					url: '../../packageB/pages/content-info/content-info?kechengId=' + kechengId,
				});
			},
		}
	}
</script>

<style>
	/* 大班课内容列表公共样式 */
	@import url("/static/css/course_list.css");

	/* 	page{
		overflow: scroll;
	} */
	.box{
		border-radius: 16rpx;
		background-color: #fff;
		padding-top: 10rpx;
		margin: 4px 15rpx;
		margin-bottom: 21rpx !important;
	}
	.free {
		background-color: rgb(234, 255, 244);
		height: 40rpx;
		line-height: 40rpx;
	}

	.xiangziwrap {
		width: 684rpx !important;
	}

	.search_home {
		position: relative;
		top: 13rpx;
	}

	.uni-common-mt {
		margin-top: 10rpx;
	}

	.uni-padding-wrap {
		width: 94%;
		padding: 0rpx;
	}

	.msg-lt-wrap {
		padding-left: 30rpx;
	}

	.msg-lt-title {
		font-size: 34rpx;
		font-weight: bold;
	}

	.free {
		padding-left: 20rpx;
		padding-top: 7rpx;
		background-color: rgb(234, 255, 244);
		height: 45rpx;
		width: 70rpx;
		line-height: 40rpx;
		border-radius: 11rpx;
	}

	.live-list {
		width: 95%;
		height: 190rpx;
		margin: 30rpx auto;
		padding-top: 20rpx;
		border-radius: 8rpx;
		background-color: #FFFFFF;
	}

	.live-c-title {
		line-height: 30rpx;
		height: 20%;
	}

	.live-teacher-price {
		margin-top: 10rpx;
	}

	.price-wrap {
		margin-left: 55% !important;
	}

	.xiangziwrap {
		position: relative;
		left: 52rpx;
		width: 700rpx;
	}

	.xiangzi {
		margin-left: 100rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.xiangzi_txt {
		width: 100%;
		display: block;
		text-align: center;
		font-size: 24rpx;
		color: #C7C7C7;
	}
</style>